01 / 09

List all lifecycle methods.

Lifecycle methods are available to class based components:

  1. 1

    constructor

  2. 2

    static getDerivedStateFromProps

  3. 3

    render()

  4. 4

    componentDidMount

  5. 5

    getSnapshotBeforeUpdate

  6. 6

    shouldComponentUpdate

  7. 7

    componentDidUpdate -> after the component updates

  8. 8

    componentWillUnmount() → cleanup when the component is unmounting

  9. 9

    componentDidCatch

Difficulty: 5/10
Topics: class component lifecycle, hooks useEffect, error boundaries

Scenario Questions

0-2 years experience
  1. 1

    How would you add a console.log to see when a component mounts and when it unmounts?

  2. 2

    Which lifecycle method runs right after the first render, and what is it typically used for?

  3. 3

    What happens if you call setState inside componentWillUnmount?

2-5 years experience
  1. 1

    Your component fetches data in componentDidMount but you notice the request fires twice. Which lifecycle methods would you inspect to fix it?

  2. 2

    A child component re‑renders on every parent prop change even though it doesn’t need the new data. Which lifecycle method could you implement to prevent the extra renders?

  3. 3

    You’re replacing componentWillReceiveProps with getDerivedStateFromProps. What changes are required and what pitfalls should you watch for?

5-8 years experience
  1. 1

    Design a reusable error‑boundary component. Which lifecycle methods are essential and how do they interact with React’s error handling?

  2. 2

    You need a polling loop that starts on mount, stops on unmount, and pauses when the browser tab is hidden. Which lifecycle methods or hooks would you use and why?

  3. 3

    When optimizing a large list, how would you decide between using componentDidUpdate versus getSnapshotBeforeUpdate to measure DOM changes?

8+ years experience
  1. 1

    Your organization is migrating 200 class components to functional components with hooks. How would you plan the migration, ensuring lifecycle behavior stays equivalent and regressions are caught?

  2. 2

    Across several teams you need a consistent strategy for side‑effects and cleanup. What guidelines would you set for using useEffect versus class lifecycle methods, and how would you enforce them?

  3. 3

    If you must support both React 16.8 (with hooks) and older versions without hooks, how would you architect shared components to expose lifecycle behavior without duplicating code?

Follow-up Questions

  • Can you walk me through the exact order these methods run during mounting and updating?
  • Why were componentWillMount and componentWillReceiveProps deprecated, and what should be used instead?
  • When would you choose getSnapshotBeforeUpdate over componentDidUpdate?